<template>
  <el-container>
    <el-main>
      <!-- 主内容 -->
      Main Content Here
    </el-main>
    <el-aside width="200px">
      <!-- 问题编号和分组显示 -->
      <div class="section">
        <h3>一. 单选题 (  分)</h3>
        <div class="numbers">
          <el-button v-for="n in 21" :key="n" type="primary" circle>{{ n }}</el-button>
        </div>
        <p class="score">65.1分</p>
      </div>
      <div class="section">
        <h3>二. 判断题 (  分)</h3>
        <div class="numbers">
          <el-button v-for="n in 32" v-if="n >= 22" :key="n" type="primary" circle>{{ n }}</el-button>
        </div>
        <p class="score">31.8分</p>
      </div>
    </el-aside>
  </el-container>
</template>

<script>
export default {
  name: 'QuizNumbersComponent'
};
</script>

<style scoped>
.section {
  margin-bottom: 20px;
}

.numbers {
  display: flex;
  flex-wrap: wrap;
}

.numbers .el-button {
  margin: 5px;
}

.score {
  margin-top: 10px;
}
</style>
